<template>
  <div class="mywork-container">
    <!-- <a-modal
      title="数据统计"
      v-model:open="showModal"
      width="700px"
      :footer="null"
    >
      <a-range-picker
        :value="dateRange"
        @change="onDateChange"
        format="YYYY-MM-DD"
      />
      <div id="main-chart" :style="{width: '600px', height: '400px'}">
        <a-spin v-if="loading" size="large" class="chart-loading"/>
      </div>
      <a-table :columns="tableColumns" :data-source="tableData">
      </a-table>
    </a-modal> -->
    <a-row type="flex" justify="space-between" align="middle" class="poster-title">
      <div v-if="currentSearchText" class="searchResult">
        <h2>{{currentSearchText}}的结果</h2>
        <a-button shape="circle" size="small" :style="{marginLeft: '10px'}" @click="clearSearch">
          ×
        </a-button>
      </div>
      <h2 v-else>我的作品和模版</h2>
      <a-input-search v-model:value="searchText" placeholder="搜索我的作品或者模版" @search="onSearch" />
    </a-row>
    <a-tabs @change="changeCategory">
      <a-tab-pane key="0" tab="我的作品">
      </a-tab-pane>
      <a-tab-pane key="1" tab="我的模版">
      </a-tab-pane>
    </a-tabs>

    <a-empty v-if="works.length === 0 && !isWorkLoading">
      <template v-slot:description>
        <span> 还没有任何作品 </span>
      </template>
      <a-button type="primary" size="large" @click="createDesign">
        创建你的第一个设计 🎉
      </a-button>
    </a-empty>

    <works-list :list="works" @on-delete="onDelete" @on-copy="onCopy" :loading="isWorkLoading" @on-static="openStatic"
      :transfer-status="transferDone">
    </works-list>
    <a-row type="flex" justify="center">
      <a-pagination v-model:current="currentPage" :total="total" :pageSize="8" show-less-items @change="pageChange" />
    </a-row>

    <a-row type="flex" justify="center" align="middle">

      <ul class="ant-pagination css-dev-only-do-not-override-19iuou">
        <li class="ant-pagination-prev" :class="{ 'ant-pagination-disabled': isFirstPage }">
          <a class="ant-pagination-item-link" @click.prevent="loadPrevPage">上一页</a>
        </li>
        <li v-for="item in totalPage" :key="item" class="ant-pagination-item" :class="{'ant-pagination-item-active': item===pageIndex+1}">
          <a @click.prevent="goToPage(item-1)">{{ item }}</a>
        </li>
        <li class="ant-pagination-next" :class="{ 'ant-pagination-disabled': isLastPage }">
          <a class="ant-pagination-item-link" @click.prevent="loadMorePage">下一页</a>
        </li>
      </ul>
    </a-row>
  </div>
</template>

<script setup lang="ts" name="MyWorks">
import { computed, onMounted, ref, nextTick } from 'vue'
import { workInfos } from '@/stores/work'
import pinia from '@/stores/index'
import { gloabl } from '@/stores/global'
import { userInfos } from '@/stores/user'
import { Html5TwoTone, BuildTwoTone, BulbTwoTone } from '@ant-design/icons-vue'
import useLoadMore from '@/hooks/useLoadMore'
import { useRouter } from 'vue-router'
import WorksList from '@/components/WorkList.vue'
import useCreateDesign from '@/hooks/useCreateDesign'
// import { toDateFormat, toDateFromDays, getDaysArray, objToArr } from '../helper'
import { message } from 'ant-design-vue'
import { WorkApi } from '@/api/works'

const workStore = workInfos(pinia)
const globalStore = gloabl(pinia)
const works = computed(() => workStore.works)

const userInfoStore = userInfos(pinia)

const router = useRouter()
const isWorkLoading = computed(() => globalStore.isOpLoading('getWorks'))
const total = computed(() =>workStore.totalWorks)
//const loading = computed(() => store.state.status.loading)
const statics = computed(() => workStore.statics)
//const channels = computed(() => store.state.editor.channels)
const currentPage = ref(1)
const transferDone = ref(false)

const {
  loadMorePage,
  isLastPage,
  isFirstPage,
  loadPrevPage,
  requestParams,
  pageIndex,
  goToPage,
  totalPage } = useLoadMore(workStore.setWorkList, total, { pageIndex: 0, pageSize: 4 })

const totalPv = computed(() => {
    let total = 0
    statics.value.forEach(stat => {
    const pv = stat.list.reduce((prev, current) => current.eventData.pv + prev, 0)
    total += pv
    })
    return total
})

const searchText = ref('')
const showModal = ref(false)
const currentStaticId = ref(0)
const isTemplate = ref(0)
const currentSearchText = computed(() => workStore.searchText)
const createDesign = useCreateDesign()
let myChart: any
onMounted(() => {
    let params = { title:'', pageIndex: 0, pageSize: 4}
    workStore.setWorkList(params)
})
const onSearch = () => {
    const title = searchText.value.trim()
    if (title !== '') {
        let params = { title, pageIndex: 0, pageSize: 4 }
        workStore.setWorkList(params)
    } else {
      clearSearch()
    }
}
const clearSearch = () => {
    let params = {  pageIndex: 0, pageSize: 4 }
    workStore.setWorkList(params)
}
const onDelete = (id: number) => {
    workStore.deleteWork(id)
}
const onCopy = async(id: number) => {
    const [e,r] = await WorkApi.copyWork<WorkProp>(id, {opName: 'copyWork'})
    if (r&& r.errno ===0) {
        router.push(`/work/editor/${r.data.id}`)
    }
}
const sendGift = (data: { id: number; username: string}) => {
    // store.dispatch('transferWork', data).then((data) => {
    // console.log(data)
    // if (data.errno !== 0) {
    //     message.error(data.message)
    // } else {
    //     message.success('转赠作品成功')
    //     transferDone.value = true
    // }
    // })
}
const changeCategory = (key: any) => {
    isTemplate.value = key
    currentPage.value = 1
    requestParams.pageIndex =0
  requestParams.isTemplate = (isTemplate.value === 0 ? false : true)
  let params = { isTemplate: requestParams.isTemplate,  title: currentSearchText.value, pageIndex: 0, pageSize: 4 }
    nextTick(() => {
      workStore.setWorkList(params)
    })
}
const pageChange = () => {
    let params ={ title: currentSearchText.value, pageIndex: (currentPage.value - 1), pageSize: 4 }
    workStore.setWorkList(params)
}

const openStatic =()=>{}

</script>
<style lang="scss" scoped>
.mywork-container {
    padding: 0 24px 10px;
    min-height: 88vh;
}
 .mywork-container .ant-input-search {
  width: 30%;
}
.searchResult {
  display: flex;
  align-items: center;
}
#main-chart {
  position: relative
}
.chart-loading {
  position: absolute;
  left: 50%;
  top: 50%;
}
</style>